<template>
    <div class="profile-history">
        <Navigator>
            <template v-slot:center>
                <div class="title">浏览记录</div>
            </template>
        </Navigator>
        <div class="body">
            <div class="type-bar row">
                <div
                    class="btn video"
                    :class="{ 'btn-active': curType === 'video' }"
                    @click="changeType('video')"
                >
                    视频
                </div>
                <div
                    class="btn article"
                    :class="{ 'btn-active': curType === 'article' }"
                    @click="changeType('article')"
                >
                    文章
                </div>
            </div>

            <div class="list">
                <HistoryItem
                    v-for="(item, index) in curHistory"
                    :key="index"
                    :item="item"
                />
            </div>
        </div>
    </div>
</template>

<script>
import HistoryItem from "./components/historyItem/index.vue";
export default {
    components: {
        HistoryItem
    },
    data() {
        return {
            curType: "video",
            curHistory: [],
            historyData: {}
        };
    },
    created() {
        this.getHistory();
    },
    methods: {
        getHistory() {
            this.$cloudApi.getUserHistory().then(res => {
                console.log("getHistory", res);
                this.curHistory = res[this.curType];
                this.historyData = res;
            });
        },

        changeType(type) {
            this.curType = type;
            this.curHistory = this.historyData[type];
        }
    }
};
</script>


<style lang="less" scoped>
.profile-history {
    padding-top: 100px;
    .body {
        width: 100%;

        .type-bar {
            padding: 0 30px;
            .btn {
                margin-right: 30px;
                padding: 10px 20px;
                border-radius: 8px;
            }

            .btn-active {
                background: #f5f5f5;
                color: #07c160;
            }
        }

        .list {
            padding: 0 30px 30px 30px;
        }
    }
}
</style>